<template>
	<view>
		<text style="color: gray;margin: 15px;font-size: 16px;">表中所记都是虚岁，所标年份都是阳年年份</text>
		<view v-for="row in gan" :key="row">
			<view class="hjpanel">
				<view class="hj" v-for="index in hj" :key="index">
					<text class="agetext">{{ getYear(row, index) }}</text>
				</view>
			</view>
			<view class="hjpanel">
				<view class="hj" v-for="index in hj" :key="index">
					<text class="hjtext"> {{ getHuaJiaText(row, index) }} </text>
				</view>
			</view>
			<view class="hjpanel">
				<view class="gz" v-for="index in zhi" :key="index">
					<text class="gztext">{{ getGanZhiText(row, index) }}</text>
				</view>
			</view>
			<view class="hjpanel">
				<view class="age" v-for="index in zhi" :key="index">
					<text class="agetext" v-for="val in getAgeList(row, index)" :key="val">{{ val }}</text>
				</view>
			</view>
			<view class="hjpanel" style="height: 12px;">
				<view class="gz"></view>
			</view>
		</view>
		<view style="height: 100px;"></view>
	</view>
</template>

<script lang="ts">
import { dateUtil } from '../../common/dateUtil'
import { GanZhi } from '../../common/ganzhi';
export default {
	data() {
		return {
			gan: [0, 1, 2, 3, 4],
			zhi: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
			hj: [0, 1, 2, 3, 4, 5],
		}
	},
	methods: {
		getHuaJiaText(row: number, index: number) {
			return GanZhi.getNaYinText(GanZhi.getHuaJiaByIndex((row * 2 + index * 2) % 10, index * 2));
		},
		getGanZhiText(row: number, index: number) {
			return GanZhi.getTianGanText((row * 2 + index) % 10) + GanZhi.getDiZhiText(index);
		},
		getAgeList(row: number, index: number): string[] {
			var dyear = (new Date()).getFullYear();
			var dstart = GanZhi.getHuaJiaIndexByYear(dyear);
			var dage = (60 + dstart - (row * 12 + index)) % 60 + 1;
			let age2 = Math.floor(dage + 60).toString();
			return [Math.floor(dage).toString(), age2];
		},
		getYear(row: number, index: number) {
			var thisindex = GanZhi.getHuaJiaByIndex((row * 2 + index * 2) % 10, index * 2);
			let year = (new Date()).getFullYear();
			var nowindex = GanZhi.getHuaJiaIndexByYear(year);
			return year + (thisindex - nowindex);
		}
	}
}
</script>

<style>
.hjpanel {
	display: flex;
	flex-direction: row;
	border-top: solid #76b043 1px;
	border-left: solid #76b043 1px;
}

.hj {
	flex-shrink: 1;
	flex-grow: 1;
	padding-top: 5px;
	padding-bottom: 5px;
	border-right: solid #76b043 1px;
	display: flex;
	flex-direction: column;
	width: 16.66%;
}

.hjtext {
	text-align: center;
	font-size: 18px;
	color: red;
}

.gz {
	flex-shrink: 1;
	flex-grow: 1;
	border-right: solid #76b043 1px;
	padding-top: 5px;
	padding-bottom: 5px;
	display: flex;
	flex-direction: column;
}

.gztext {
	text-align: center;
	font-size: 18px;
	color: blue;
}

.age {
	flex-shrink: 1;
	flex-grow: 1;
	border-right: solid #76b043 1px;
	padding-top: 5px;
	padding-bottom: 5px;
	height: 47px;
	display: flex;
	flex-direction: column;
	width: 8.33%;
}

.agetext {
	text-align: center;
	font-size: 18px;
}
</style>